<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        table td {
            text-align: center;
            padding: 5px 10px;
            height: 20px;
            min-width: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add()">点击增加</button>
        <button @click="sort()">点击排序</button>

        <select v-model="selected">
            <option value="全部">全部</option>
            <option value="时兴装饰">时兴装饰</option>
            <option value="雅玥园林">雅玥园林</option>
            <option value="振中建设">振中建设</option>
            <option value="雅丰贸易">雅丰贸易</option>
            <option value="原构设计">原构设计</option>
        </select>
        <table>
            <tbody>
                <tr v-for="(item,index) in list" v-if="selected==item.ch_area_name||selected=='全部'?true:false">
                    <td>{{item.id}}</td>
                    <td>{{item.ch_name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.ch_area_name}}</td>
                    <td>{{format(item.time)}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
    <script src="./js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        // ajax从后台请求数据
        $.ajax({
                url: 'http://www.agilebuild.com.cn/api/Recruitment/get_recruitment_list',
                type: 'POST',
                data: {
                    list_id: 2,
                    selected: "",
                }
            })
            .done(function(res) {
                console.log("success");
                new Vue({
                    el: "#app",
                    data: {
                        list: res.data,
                        selected: "全部",
                    },
                    methods: {
                        format: function(time) {
                            return new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
                        },
                        del: function(index) {
                            this.list.splice(index, 1)
                        },
                        add: function() {
                            // this.list.
                        },
                        sort: function() {
                            this.list.sort(function(a, b) {
                                return a.id - b.id;
                            })
                        }

                    }
                })
            })

            // 下面部分可以不写
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    </script>
</body>

</html>
